<template>
	<div class="message-item">
		<component
			:is="msgType(cmd)"
			:data="msgData"
			:ignoreVoice="data.ignore"
		/>
	</div>
</template>

<script>
import DanmuMsg from "./components/DanmuMsg.vue";
import InteractWord from "./components/InteractWord.vue";
import SendGift from "./components/SendGift.vue";
export default {
	name: "massage-item",
	props: {
		data: {
			// 指定props传递的类型
			type: Object,
			// 默认值
			default: () => ({}),
		},
	},
	mounted() {},
	methods: {
		// 判断走哪个组件
		msgType(cmd) {
			return {
				DANMU_MSG: DanmuMsg,
				INTERACT_WORD: InteractWord,
				SEND_GIFT: SendGift,
				COMBO_SEND: SendGift,
			}[cmd];
		},
	},
	computed: {
		// 区分信息类别
		cmd() {
			return this.data.cmd;
		},
		// 获取详细信息 info为消息内容 data为欢迎词
		msgData() {
			return this.data.info || this.data.data;
		},
		// 显示入场欢迎和关注感谢
		showInteractWord() {
			return this.msgData.msg_type !== 1;
		},
	},
};
</script>

<style lang="scss">
.message-item {
	+ .message-item {
		margin-top: 10px;
	}
	&:empty {
		margin-top: 0;
	}
}
</style>
